<template>
  <view class="phxx-item-detail">
    <view class="content-box">
      <view class="bottom block-back">
        <view class="uni-form-item">
          <view class="title"><span style="color: red">*</span>拉黑属性：</view>
          <view class="uni-select-box" @click="isAttribute=true">
            <view v-if="!inputObj.attributes.length" class="placeholder">请先选择拉黑属性</view>
            <view class="contns-select" v-else>{{attributeText}}</view>
            <uni-icons type="forward" size="20"></uni-icons>
          </view>
        </view>
        <view v-if="showCarBrand" class="uni-form-item">
          <view class="title"><span style="color: red">*</span>车牌号：</view>
          <input :maxlength="8" class="uni-input" placeholder="请输入" v-model="inputObj.carBrand" />
        </view>
        <view v-if="showIDCard" class="uni-form-item">
          <view class="title"><span style="color: red">*</span>身份证号：</view>
          <input :maxlength="18" class="uni-input" placeholder="请输入" v-model="inputObj.IDCard" />
        </view>
        <view class="uni-form-item">
          <view class="title">开始时间：</view>
          <w-picker :visible="isStart" class="disab-box" mode="date" startYear="1900" endYear="2124" :current="false"
            fields="second" @confirm="onConfirm($event,'startTime')" @cancel="onCancel" :disabled-after="false"
            ref="date1"></w-picker>
          <input v-model="inputObj.startTime" class="uni-input prd-mess" placeholder="请选择开始生效时间" disabled="true"
            @click="isStart=true"></input>
        </view>
        <view class="uni-form-item">
          <view class="title">结束时间：</view>
          <w-picker :visible="isEnd" class="disab-box" mode="date" startYear="1900" endYear="2124" :current="false"
            fields="second" @confirm="onConfirm($event,'endTime')" @cancel="onCancel" :disabled-after="false"
            ref="date1"></w-picker>
          <input v-model="inputObj.endTime" class="uni-input prd-mess" placeholder="请选择结束生效时间" disabled="true"
            @click="isEnd=true"></input>
        </view>
        <view class="uni-form-item">
          <view class="title">备注：</view>
          <input :maxlength="200" class="uni-input" placeholder="请输入" v-model="inputObj.notes" />
        </view>
        <view class="btn-bottom">
          <button type="primary" :disabled="isLoading" class="bg-color-common-self" @click="handleSave">
            提交
          </button>
        </view>
      </view>
    </view>
    <select-search :show="isAttribute" :title="'选择拉黑属性'" :type="'checkbox'" :showSearch="false"
      :params="inputObj.attributes" :name="'label'" :value="'value'" :dataLists="attributes" @cancel="cancelPop"
      @submit="submitPop"></select-search>
    <tip-box :show="showTip" :message="tipContent" :duration="3000" @showTip="showTip=false"></tip-box>
  </view>
</template>
<script>
  import { toast, getDateFormat } from '@/utils/common';
  import { getDictList } from '@/api/login';
  import { blacklistCreateByApp } from '@/api/blackList';
  export default {
    data() {
      return {
        isStart: false,
        isEnd: false,
        isAttribute: false,
        isLoading: false,
        attributes: [],
        inputObj: {
          bizType: 1,
          attributes: [],
          carBrand: '',
          IDCard: '',
          startTime: '',
          endTime: '',
          notes: ''
        },
        showTip: false,
        tipContent: '',
        oneHour: 60 * 60 * 1000
      };
    },
    computed: {
      attributeText() {
        return this.inputObj.attributes.map(e => e.label).join(',')
      },
      showCarBrand() {
        return this.inputObj.attributes.some(e => e.value === '0')
      },
      showIDCard() {
        return this.inputObj.attributes.some(e => e.value === '1')
      }
    },
    mounted() {
      this.getDictLists();
    },
    methods: {
      async getDictLists() {
        const res = await getDictList();
        if (res.code === 0) {
          this.attributes = (res.data || []).filter(
            (e) => e.dictType === 'blacklist_attribute'
          );
        }
      },
      onConfirm(value, type) {
        this.inputObj[type] = value.result
        this.isStart = false
        this.isEnd = false
      },
      onCancel() {
        this.isStart = false
        this.isEnd = false
      },
      cancelPop() {
        this.isAttribute = false
      },
      submitPop(data) {
        this.inputObj.attributes = data;
        this.isAttribute = false
      },
      async handleSave() {
        if (!this.inputObj.attributes.length) {
          toast('请先选择拉黑属性');
          return
        }
        if (this.showCarBrand && !this.inputObj.carBrand) {
          toast('请输入车牌号');
          return
        }
        if (this.showIDCard && !this.inputObj.IDCard) {
          toast('请输入身份证号');
          return
        }
        const data = { ...this.inputObj }
        data.attributes = this.getAttributesParams()
        data.startTime = data.startTime ? this.getTimeStamp(`${data.startTime.slice(0, -5)}00:00`) : this.getTimeStamp(`${getDateFormat(new Date()).slice(0, -5)}00:00`);
        data.endTime = data.endTime ? this.getTimeStamp(`${data.endTime.slice(0, -5)}00:00`) : this.getTimeStamp('2099-12-30 23:59:59')
        if (this.inputObj.startTime || this.inputObj.endTime) {
          if (data.endTime - data.startTime < this.oneHour) {
            this.showTip = true
            this.tipContent = '结束时间必须晚于开始时间，请重新选择(开始与结束时间间隔必须一小时以上)'
            return
          }
        }
        delete data.carBrand;
        delete data.IDCard;
        if (this.isLoading) return;
        this.isLoading = true;
        const res = await blacklistCreateByApp(data);
        if (res.code === 0 && res.data) {
          toast('新增成功');
          uni.navigateBack({
            url: '/packageB/pages/blackList/index'
          });
        } else {
          toast(res.msg);
        }
        this.isLoading = false;
      },
      getAttributesParams() {
        return this.inputObj.attributes.map(e => {
          return {
            attribute: e.value,
            name: e.value === '0' ? this.inputObj.carBrand : this.inputObj.IDCard
          }
        })
      },
      getTimeStamp(value) {
        return new Date(value).getTime()
      }
    },
  };
</script>
<style lang="scss" scoped>
  .btn-bottom {
    position: fixed;
    display: flex;
    align-items: center;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 90px;
    padding: 0 15px;
    background-color: #fff;

    button {
      width: calc(100% - 30px);
      height: 45px !important;
      line-height: 45px !important;
    }
  }

  .placeholder {
    padding-left: 10rpx;
    color: #808080;
  }
</style>